/**
 * 
 * @param {DOM} dom 
 * @param {Object} target 
 * {
 *  [string]: number | Param
 * }
 * @target {Param} 
 * {
 *  targetDistance: number, 必填参
 *  step?: number,  默认值 5
 *  unit?: string,  默认值 'px'
 *  init?: number   默认值 0
 * }
 * 
 * @param {Function} callback  在本次动画结束时，调用 回调函数
 */
function move(dom, target, callback) {

  // 获取 动画 有几个 “维度”
  const targetSize = Object.entries(target).length;

  // 结束了几个“平行宇宙”，的动画
  let endTime = 0;

  Object.entries(target) // [['left', 400], ['top', {targetDistance: 500}]]
    .forEach(([type, obj]) => {
      const targetDistance = obj?.targetDistance ?? obj; // `??`  适配 1）obj 为数字的时候

      let distance = obj?.init ?? 0;
      const step = obj?.step ?? 5;
      const unit = obj?.unit ?? 'px';

      const id = setInterval(() => {
        distance += step;

        if (distance > targetDistance) {
          clearInterval(id);
          // 本“平行宇宙”的动画结束了
          endTime++;

          if (endTime === targetSize) {
            // 表示 所有 平行宇宙的动画 都结束了
            callback();
          }
        }

        dom.style[type] = distance + unit;

      }, 1000 / 60);
    })
}
